<script setup>
import '@/assets/card.css'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import SystemApi from '@/utils/api/Api.js'

// 虚拟机最大内存
const vmMaximumMemory = ref(0);
// 虚拟机已使用内存
const vmMemoryUsed = ref(0);
// 物理最大内存
const phMaximumMemory = ref(0);
// 物理已使用内存
const phMemoryUsed = ref(0);
// 磁盘信息
const dist = ref([]);
// const d = reactive({
//   path: '1',// 磁盘路径
//   total: 0,// 总空间
//   un: 0,// 可用空间
//   free: 0// 空闲空间
// });

// 保留有效位置
function reservedValidBit(str) {
  let arr = str.split('.');
  if (arr.length <= 1) return str;
  return arr[0] + (arr[0].length < 4 ? ('.' + arr[1].substring(0,4-arr[0].length)) : '');
}

// 自动转换单位
function getNum(num) {
  if (num < 10000) {
    return num + '';
  } else if (num < 100000000) {
    num = num / 10000;
    num = num.toFixed(3);
    return reservedValidBit(num) + '万';
  } else {
    num = num / 100000000;
    num = num.toFixed(3);
    return reservedValidBit(num) + '亿'
  }
}

function getNumByBt(num) {
  const arr = ["KB", "MB", "GB", "TB"];
  let index = 0;
  num = num / 1024;
  while (num >= 1024 && index < arr.length) {
    num = num / 1024;
    index++;
  }
  return reservedValidBit(num+'')+arr[index];
}

let update;

onMounted(()=>{
  setInterval(()=>{
    SystemApi.getVMMaximumMemory().then(res => {
      vmMaximumMemory.value = Number.parseInt(res);
    }).catch(err => {});
    SystemApi.getVMMemoryUsed().then(res => {
      vmMemoryUsed.value = Number.parseInt(res);
    }).catch(err => {});
    SystemApi.getPHMaximumMemory().then(res => {
      phMaximumMemory.value = Number.parseInt(res);
    }).catch(err => {});
    SystemApi.getPHMemoryUsed().then(res => {
      phMemoryUsed.value = Number.parseInt(res);
    }).catch(err => {});
    SystemApi.getDisk().then(res => {
      // dist.value.splice(0, dist.value.length)
      for(let i in res) {
        if (dist.value[i] === undefined) {
          dist.value.push({
            path: res[i].path,
            total: Number.parseInt(res[i].total),
            un: Number.parseInt(res[i].un),
            free: Number.parseInt(res[i].free)
          });
        } else {
          dist.value[i].path = res[i].path;
          dist.value[i].total = Number.parseInt(res[i].total);
          dist.value[i].un = Number.parseInt(res[i].un);
          dist.value[i].free = Number.parseInt(res[i].free);
        }
      }
    }).catch(err => {});
  }, 10000);
});
onUnmounted(()=>{
  clearInterval(update);
});

function getDefaultNum(num) {
  return Number.isNaN(num) ? 0 : num;
}
</script>
<template>
  <div class="card" v-if="phMemoryUsed !== 0">
    <div class="title">系统信息</div>
    <div class="content">
      <div class="box">
        <el-progress type="dashboard" :percentage="getDefaultNum(Number.parseInt((vmMemoryUsed/vmMaximumMemory*100).toFixed(0)))">
          <template #default="{ percentage }">
            <span class="percentage-value">{{percentage}}%</span>
            <span class="percentage-label">虚拟内存</span>
          </template>
        </el-progress>
        <div class="box-title">{{getNumByBt(vmMemoryUsed)}}/{{getNumByBt(vmMaximumMemory)}}</div>
      </div>
      <div class="box">
        <el-progress type="dashboard" :percentage="getDefaultNum(Number.parseInt((phMemoryUsed/phMaximumMemory*100).toFixed(0)))">
          <template #default="{ percentage }">
            <span class="percentage-value">{{percentage}}%</span>
            <span class="percentage-label">物理内存</span>
          </template>
        </el-progress>
        <div class="box-title">{{getNumByBt(phMemoryUsed)}}/{{getNumByBt(phMaximumMemory)}}</div>
      </div>
      <div v-for="d in dist" class="box">
        <el-progress type="dashboard" :percentage="getDefaultNum(Number.parseInt(((d.total-d.free)/d.total*100).toFixed(0)))">
          <template #default="{ percentage }">
            <span class="percentage-value">{{percentage}}%</span>
            <span class="percentage-label">物理磁盘{{d.path}}</span>
          </template>
        </el-progress>
        <div class="box-title">{{getNumByBt(d.total-d.free)}}/{{getNumByBt(d.total)}}</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.content {
  max-width: 442px;
  max-height: 400px;
  overflow: auto;
  transition: all 1s ease-out;
  border-radius: 10px;
}

.box {
  float: left;
  margin: 10px;
  width: 126px;
}

.box .box-title {
  width: 100%;
  text-align: center;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
  width:4px;
  background-color:#F5F5F5;
}
/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track
{
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
  border-radius:10px;
  background-color: rgba(245,245,245,1);
}
/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
  border-radius:10px;
  -webkit-box-shadow:inset 0 0 1px rgba(100,100,100,0.4);
  background-color: rgba(130,200,255,1);
}

</style>